<template>
  <div id="month"></div>
</template>

<script>
import { Column } from "@antv/g2plot";
import request from "@/router/axios";

// const data = [];

export default {
  data() {
    return {};
  },
  mounted() {
    let data = [];
    request({
      url: "2/api/WmsOrderDetail/chartmonth",
      params: {
        // time:
        //   this.date1 == null || this.date1 == "" ? "" : this.date1.join("_"),
      },
    }).then((res) => {
      res.data.data.forEach((m) => {
        data.push({
          month: m.label,
          name: "接收量",
          quantity: parseFloat(m.v1),
        });
      });
      res.data.data.forEach((m) => {
        data.push({
          month: m.label,
          name: "处置量",
          quantity: parseFloat(m.v2),
        });
      });

      const stackedColumnPlot = new Column("month", {
        data,
        isGroup: true,
        xField: "month",
        yField: "quantity",
        seriesField: "name",
        /** 设置颜色 */
        //color: ['#1ca9e6', '#f88c24'],
        /** 设置间距 */
        // marginRatio: 0.1,
        label: {
          // 可手动配置 label 数据标签位置
          position: "middle", // 'top', 'middle', 'bottom'
          // 可配置附加的布局方法
          layout: [
            // 柱形图数据标签位置自动调整
            { type: "interval-adjust-position" },
            // 数据标签防遮挡
            { type: "interval-hide-overlap" },
            // 数据标签文颜色自动调整
            { type: "adjust-color" },
          ],
        },
      });
      stackedColumnPlot.render();
    });
  },
  created() {},
  methods: {},
};
</script>

<style></style>
